<template>
  <div class="roomGeneralViewDetail" v-loading="loading">
    <el-row class="roomGeneralViewDetail-a">
      <el-col :span="12">
        <el-row class="height40">
          <span class="height40-span">
            <img :src="image.juxing_Small" alt />
          </span>
          <span class="height40-span">{{roomGeneralViewManagement.alarmTimeSet}}</span>
        </el-row>
        <el-row class="height50">
          <el-col
            class="height50-itemName"
            :span="11"
            :push="1"
          >{{roomGeneralViewManagement.startTimeSecond}}</el-col>
          <el-col :span="12">
            <el-input
              v-model.number="silentTime"
              prefix-icon="el-icon-time"
              class="startTimeSecond"
              :readonly="readonlySilentTime"
            ></el-input>
            <span style="margin-right:5px;">{{roomGeneralViewManagement.minute}}</span>
            <kt-button
              class="btn0 boxShadowButton"
              :label="roomGeneralViewManagement.search"
              :disabled="disabledSetAlarmTime"
              @click="handleSetAlarmTime"
            />
          </el-col>
        </el-row>
        <el-row class="height50">
          <el-col
            v-if="silentStatus==false"
            class="height50-itemName"
            :span="11"
            :push="1"
          >{{roomGeneralViewManagement.alarmoff}}</el-col>
          <el-col
            v-else
            class="height50-itemName"
            :span="11"
            :push="1"
          >{{roomGeneralViewManagement.alarmOn}}</el-col>
          <el-col :span="12">
            <el-switch
              v-model="silentStatus"
              @change="changeSwitch"
              active-color="#13ce66"
              inactive-color="#ccc"
            ></el-switch>
          </el-col>
        </el-row>
        <el-row class="height40">
          <span class="height40-span">
            <img :src="image.juxing_Small" alt />
          </span>
          <span class="height40-span">{{roomGeneralViewManagement.baseInfo}}</span>
        </el-row>
        <el-row class="height50">
          <el-col
            class="height50-itemName"
            :span="11"
            :push="1"
          >{{roomGeneralViewManagement.roomNo}}</el-col>
          <el-col :span="12">{{lifeRoomInfo.roomNo}}</el-col>
        </el-row>
        <el-row class="height50">
          <el-col
            class="height50-itemName"
            :span="11"
            :push="1"
          >{{roomGeneralViewManagement.resident}}</el-col>
          <el-col :span="12">{{lifeRoomInfo.oldName}}</el-col>
        </el-row>
        <el-row class="height40">
          <span class="height40-span">
            <img :src="image.juxing_Small" alt />
          </span>
          <span class="height40-span">{{roomGeneralViewManagement.roomTemperatureState}}</span>
        </el-row>
        <el-row class="height50">
          <el-col
            class="height50-itemName"
            :span="11"
            :push="1"
          >{{roomGeneralViewManagement.roomTemperature}}</el-col>
          <el-col :span="12">{{lifeRoomInfo.temperature}}</el-col>
        </el-row>
        <el-row class="height40">
          <span class="height40-span">
            <img :src="image.juxing_Small" alt />
          </span>
          <span class="height40-span">{{roomGeneralViewManagement.vitalSigns}}</span>
        </el-row>
        <el-row class="height50">
          <el-col class="height50-itemName" :span="11" :push="1">{{roomGeneralViewManagement.inBed}}</el-col>
          <el-col :span="12">{{lifeRoomInfo.inBed}}</el-col>
        </el-row>
        <el-row class="height50">
          <el-col
            class="height50-itemName"
            :span="11"
            :push="1"
          >{{roomGeneralViewManagement.heartState}}</el-col>
          <el-col :span="12">{{lifeRoomInfo.heartbeat}}</el-col>
        </el-row>
        <el-row class="height50">
          <el-col
            class="height50-itemName"
            :span="11"
            :push="1"
          >{{roomGeneralViewManagement.breathState}}</el-col>
          <el-col :span="12">{{lifeRoomInfo.breath}}</el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row style="margin-top:10px;" class="moHu">
          <div style="width:100%;height:420px" :class="filterBlur">
            <!-- 视频模块 -->
            <img
              v-if="videoFlag==false && picture==''"
              :src="image.shexiangtou"
              alt
              class="roomGeneralViewDetail-a-res"
            />
            <img
              v-if="videoFlag==false && picture!=''"
              :src="picture"
              alt
              class="roomGeneralViewDetail-a-res"
            />
            <!-- <div class="Ckplayer" v-if="videoFlag==true">
              <div id="video" ref="video_ck"></div>
            </div>-->
            <video v-if="videoFlag==true" id="remoteVideo" class="remotevideo" autoplay="autoplay"></video>
          </div>
          <div class="arc" v-if="videoFlag==true" id="loading"></div>
          <!-- 1.实时视频 isLivePlay 播放/暂停 -->
          <!-- @click="videoPlayPause" -->
          <!-- :style=" videoFlag==false?'':'bottom: 8px;'" -->
          <i
            @click="handleUrgencySure"
            v-if="deviceNo!='' && isLivePlay"
            :style="videoFlag==false?'bottom: -10px':''"
            :class="isVideoPlay?'el-icon-video-pause':'el-icon-video-play'"
            id="videoPlayPause"
          />
          <i
            @click="videoSmBig"
            v-if="videoFlag==true"
            class="el-icon-full-screen"
            id="videoSmBig"
            :style=" alertPlayFlag?'bottom: -10px;':''"
          />
          <!-- class="alarmMessage blink" 去掉动画-->
          <div v-if="videoFlag==true && !alertPlayFlag">
            <div
              :class="`${languageClass ? 'alarmMessageJp' : 'alarmMessage'}`"
            >{{roomGeneralViewManagement.videoAlarmMessage}}</div>
          </div>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="roomGeneralViewDetail-b height40">
      <span class="height40-span">
        <img :src="image.juxing_Small" alt />
      </span>
      <span class="height40-span">{{roomGeneralViewManagement.alarmMessage}}</span>
    </el-row>
    <el-row class="roomGeneralViewDetail-e height40">
      <el-col :span="20">
        <el-date-picker
          style="width:98%;"
          :editable="false"
          v-model="timeValueTable"
          unlink-panels
          type="daterange"
          :start-placeholder="roomGeneralViewManagement.startDate"
          :end-placeholder="roomGeneralViewManagement.endDate"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-col>
      <el-col :span="4">
        <kt-button
          class="btn0 boxShadowButton"
          :label="roomGeneralViewManagement.search"
          @click="serachAlarmTable"
        />
      </el-col>
    </el-row>
    <el-row class="roomGeneralViewDetail-c">
      <el-table
        style="width:100%"
        :data="tableData"
        :border="false"
        :header-cell-style="tableHeaderColor"
        :row-style="tableRowStyle"
        @row-click="handleAlertClick"
      >
        <el-table-column
          prop="createdTime"
          align="center"
          :label="roomGeneralViewManagement.occurrenceTime"
          min-width="150"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="alertType"
          :formatter="formatAlertType"
          align="center"
          :label="roomGeneralViewManagement.condition"
          min-width="120"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          align="center"
          :label="roomGeneralViewManagement.acknowledgingTime"
          min-width="150"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="lastOperator"
          align="center"
          :label="roomGeneralViewManagement.affirmant"
          min-width="100"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <!-- by guo 2020-03-09-13:51添加  警报录像播放按钮 -->
        <el-table-column :label="roomGeneralViewManagement.opertion" min-width="50" align="center">
          <template slot-scope="scope">
            <img
              class="handedness"
              v-if="alertPlayFlag && scope.row.videoPlayIconShow && isVideoPlay"
              :src="image.life_video_push"
              alt
              @click="alarmVideoPushClick(scope.$index,scope.row)"
            />
            <img
              class="handedness"
              v-else
              :src="image.life_video_play"
              alt
              @click="alarmVideoPlayClick(scope.$index,scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        layout="total, prev, pager, next, jumper"
        :total="totalDataNumber"
        :page-size="pageSize"
        align="center"
        class="fenyeTwo"
      ></el-pagination>
    </el-row>
    <el-row style="margin-top:40px;">
      <kt-button
        v-if="alarmSurefalg"
        class="btn0 boxShadowButton"
        :label="roomGeneralViewManagement.confirmCompleted"
        @click="handleSureComplete"
      />
      <kt-button
        v-else
        class="btn0 boxShadowButton"
        :label="roomGeneralViewManagement.confirmCompleted"
        @click="handleSureComplete"
      />
    </el-row>
    <el-row class="roomGeneralViewDetail-d height40">
      <span class="height40-span">
        <img :src="image.juxing_Small" alt />
      </span>
      <span class="height40-span">{{roomGeneralViewManagement.alarmMessageOutput}}</span>
    </el-row>
    <el-row class="roomGeneralViewDetail-e height40">
      <el-col :span="20">
        <el-date-picker
          style="width:98%;"
          :editable="false"
          v-model="timeValue"
          unlink-panels
          type="daterange"
          :start-placeholder="roomGeneralViewManagement.startDate"
          :end-placeholder="roomGeneralViewManagement.endDate"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-col>
      <el-col :span="4">
        <kt-button
          class="btn0 boxShadowButton"
          :label="roomGeneralViewManagement.cSVOutput"
          @click="handleCsvOutput"
        />
      </el-col>
    </el-row>
    <el-row class="roomGeneralViewDetail-f height40">
      <el-col :span="4">
        <kt-button
          class="btn0 boxShadowButton"
          :label="roomGeneralViewManagement.backList"
          @click="handleBackList"
        />
      </el-col>
      <el-col :span="4" :offset="6">
        <kt-button
          class="btn1 boxShadowButton"
          :label="roomGeneralViewManagement.vitalSignsDetail"
          @click="handleDetail"
        />
      </el-col>
      <el-col :span="4" :offset="6">
        <!-- <kt-button
          :icon="(videoFlag && urgencySureFlag && !alertPlayFlag) ? 'el-icon-video-pause' : 'el-icon-video-play'"
          class="btn2 boxShadowButton"
          :label="(videoFlag && urgencySureFlag && !alertPlayFlag) ? roomGeneralViewManagement.confirmCompleted : roomGeneralViewManagement.urgentConfirmation"
          @click="handleUrgencySure"
        />-->
      </el-col>
    </el-row>
  </div>
</template>
<script>
import KtButton from "@/components/KtButton";
import bus from "../../../vuex/eventBus"; //引入eventBus,接收子界面传递的跳转指令,然后在父界面跳转,添加tab
import realVideo from "../../../assets/lifeGroupimg/realVideo.png";
import juxing_Small from "../../../assets/lifeGroupimg/juxing_small.png";
import juxing_red from "../../../assets/lifeGroupimg/juxing_red.png";
import shexiangtou from "../../../assets/lifeGroupimg/shexiangtou.png";
import life_video_play from "../../../assets/lifeGroupimg/life_video_play.png";
import life_video_push from "../../../assets/lifeGroupimg/life_video_push.png";
import "video.js/dist/video-js.css";
import { videoPlayer } from "vue-video-player";
import "videojs-flash";
import { baseURL } from "../../../api/http.js";
import mqtt from "mqtt"; //导入mqtt
import {
  MQTT_SERVICE,
  MQTT_USERNAME,
  MQTT_PASSWORD,
  MQTT_CLIENTID
} from "../../../api/http.js";
export default {
  name: "RoomGeneralViewDetail",
  data() {
    return {
      roomGeneralViewManagement: this.$t("m.roomGeneralViewManagement"), //引入 lang 里面的字符串资源,
      size: "medium", //按钮的尺寸
      id: "",
      image: {
        realVideo,
        juxing_Small,
        shexiangtou,
        life_video_play,
        life_video_push
      },
      backgroundImage: "",
      disabledSetAlarmTime: false, //报警屏蔽时间的按钮是否可以点击
      readonlySilentTime: false, //是否可读
      silentTime: "", //报警屏蔽时间
      silentStatus: false, //报警设置开关  false---关   true---开
      silentStatusRoom: false, //用来判断房间是否设置了警报屏蔽
      alarmSurefalg: false,
      alertPlayFlag: false,
      cameraInfo: {},
      lifeRoomInfo: {
        roomNo: "",
        oldName: "",
        temperature: "",
        inBed: "",
        heartbeat: "",
        breath: ""
      },
      isVideoPlay: false,
      isLivePlay: true, //是否是实时视频
      videoFlag: false, //默认为false 静态图片显示 视频播放隐藏  当点击了紧急按钮之后状态为true 视频播放显示  静态图片隐藏
      urgencySureFlag: false, //用于判断实时视频按钮的播放和切换  true--播放   false--停止
      tableData: [],
      timeValueTable: "", //报警列表的查询,时间
      /* 分页的 */
      currentPage: 1, //初始页
      pageNum: 1, //页码
      pageSize: 5, //每页显示的条数
      totalDataNumber: 0, //数据的总数,
      timeValue: "", //报警导出的查询时间
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() > Date.now();
        }
      },
      bedDeviceNo: "", //床垫的设备编号
      roomId: "",
      deviceNo: "", //摄像头的设备编号
      picture: "",
      alertId: "",
      isHandle: "",
      groupId: "",
      filterBlur: "filter-blur0",
      acceptLanguage: "ja_JP", //数据请求传参需要传的语言  ja_JP----日文
      flashFlag: true, //flash默认是关闭的--true
      languageClass: true,
      conn: null, //by guo 2020-2-23-16:12添加
      /* ckplayer播放器的配置 */ videoObjectPc: {
        width: 1015, // 宽度，也可以支持百分比(不过父元素宽度要有)
        height: 574, // 高度，也可以支持百分比
        container: "#video", //“#”代表容器的ID，“.”或“”代表容器的class
        variable: "player", //该属性必需设置，值等于下面的new chplayer()的对象
        autoplay: true, //自动播放
        live: true,
        video: "" //视频地址 rtmp://58.200.131.2:1935/livetv/hunantv
      },
      videoSrc: "", //获取需要播放的url
      options: {
        connectTImeout: 4000, //超时连接的时间
        clientId: MQTT_CLIENTID,
        //clientId: "mqtitId-" + new Date().getTime(),
        //clientId: 'mqtitId-Home',
        username: MQTT_USERNAME,
        password: MQTT_PASSWORD,
        clean: true
      },
      client: "",
      msg: "", //mqtt推送的消息
      cameraStatus: "", //摄像头的状态
      alertVideoFlag: "", //报警录像是否存在 true存在  false不存在
      loading: false, //页面加载的loading by guo 2020-3-23-13:55添加
      rowAlartId: ""
    };
  },
  methods: {
    /* 
      mqtt 2020-2-28-10:50添加
    */
    mqttMSG() {
      this.client = mqtt.connect(MQTT_SERVICE, this.options);
      // mqtt连接
      this.client.on("connect", e => {
        console.log(e);
        console.log("连接成功:");
        let deviceNo = this.bedDeviceNo; //床垫的设备编号;
        let topic = "FRONT_CLIENT_" + deviceNo; // deviceNo 是守护佳床垫设备编号
        this.client.subscribe(topic, error => {
          console.log(topic, "topic");
          if (!error) {
            console.log("-----------------gzh: 订阅成功");
          } else {
            console.log("-----------------gzh: 订阅失败");
          }
        });
      });
      // 接收消息处理
      this.client.on("message", (topic, message) => {
        console.log("收到来自", topic, "的消息", message.toString());
        this.msg = message.toString();
        console.log(this.msg);
        this.msg = JSON.parse(this.msg);
        console.log(this.msg);
        if (this.msg.status == "online") {
          //by guo 2020-4-2 16:10修改
          //在离床
          if (this.msg.inBed == 0) {
            this.lifeRoomInfo.inBed = this.roomGeneralViewManagement.inBedZero;

          } else {
            this.lifeRoomInfo.inBed = this.roomGeneralViewManagement.inBedOne;
          }
          //去除心跳为-1和0的数据
          if (this.msg.heartbeat != -1 && this.msg.heartbeat != 0) {
            this.lifeRoomInfo.heartbeat = this.msg.heartbeat;
          } else {
            this.lifeRoomInfo.heartbeat = "--";
          }
          //去除呼吸为-1和0的数据
          if (this.msg.breath != -1 && this.msg.breath != 0) {
            this.lifeRoomInfo.breath = this.msg.breath;
          } else {
            this.lifeRoomInfo.breath = "--";
          }
          // if(this.msg.heartbeat!=-1){//在线 by guo 2020-3-2-21:55添加
          //   this.lifeRoomInfo.heartbeat=this.msg.heartbeat;
          //   this.lifeRoomInfo.inBed=this.roomGeneralViewManagement.inBedOne;
          // }else{
          //   this.lifeRoomInfo.heartbeat='--';
          //   this.lifeRoomInfo.inBed=this.roomGeneralViewManagement.inBedZero;
          // }
          // if(this.msg.breath!=-1){
          //   this.lifeRoomInfo.breath=this.msg.breath;
          // }else{
          //   this.lifeRoomInfo.breath='--';
          // }
        } else {
          //离线 by guo 2020-3-2-21:55添加
          if(this.msg.status == "offline"){
            this.lifeRoomInfo.inBed = this.roomGeneralViewManagement.offline;
          }else{
            this.lifeRoomInfo.inBed = '--'
          }
          this.lifeRoomInfo.heartbeat = "--";
          this.lifeRoomInfo.breath = "--";
        }
      });
      // 断开发起重连
      this.client.on("reconnect", error => {
        console.log("正在重连:", error);
      });
      // 链接异常处理
      this.client.on("error", error => {
        console.log("连接失败:", error);
      });
    },

    /* 
      by guo 2020-3-9-14:02添加
      报警录像的播放
    */
    alarmVideoPlayClick(index, row) {
      console.log(index);
      console.log(row);
      console.log(this.tableData);
      // var isHavePlayFlag = false;
      // var currentPlayIndex = 0;
      for (var i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].videoPlayIconShow == true) {
          this.tableData[i].videoPlayIconShow = false;
        }
      }
      //   console.log(isHavePlayFlag);
      //   console.log(currentPlayIndex);
      // if(isHavePlayFlag && currentPlayIndex == index){
      //     this.tableData[currentPlayIndex].videoPlayIconShow = true;
      //     var remoteVideoview = document.getElementById('remoteVideo');
      //     if (remoteVideoview!=null && remoteVideoview.paused) {
      //       remoteVideoview.play();
      //       this.isVideoPlay = true;
      //       console.log("remoteVideoview.play()");
      //       return;
      //     }else{
      //       row.videoPlayIconShow  = null;
      //     }
      // }
      // console.log("-2----------2---");
      // if(row.videoPlayIconShow == null || row.videoPlayIconShow == false){
      //   if(isHavePlayFlag){
      //     this.tableData[currentPlayIndex].videoPlayIconShow = null;
      //   }
      // console.log("-3----------3---");
      //   this.rowAlartId=row.alertId;//获取点击播放的录像的alertId
      //   row.videoPlayIconShow = true;
      //   this.tableData[index].videoPlayIconShow = true;
      //   console.log(row);
      //   console.log(this.tableData);
      //   this.alertVideoShow(row);
      // }

      this.rowAlartId = row.alertId; //获取点击播放的录像的alertId
      row.videoPlayIconShow = true;
      this.tableData[index].videoPlayIconShow = true;
      console.log(row);
      console.log(this.tableData);
      this.alertVideoShow(row);
    },

    /* 
      by guo 2020-3-9-14:02添加
      报警录像的暂停
    */
    alarmVideoPushClick(index, row) {
      console.log(row);
      console.log(this.tableData);
      this.rowAlartId = row.alertId; //获取点击播放的录像的alertId
      if (row.videoPlayIconShow == true) {
        var remoteVideoview = document.getElementById("remoteVideo");
        remoteVideoview.pause();
        this.isVideoPlay = false;
        this.videoFlag = false;
        this.isLivePlay = true;
      }
    },

    /* 
      by guo 2020-3-10-13:07添加
      通过报警id查询警报录像
    */
    alertVideoShow(row) {
      console.log(row);
      this.$postForm(
        "dmc/camera/alertVideoShowByWebRTC",
        { alertId: row.alertId },
        this.acceptLanguage
      ).then(res => {
        if (res.code == 200) {
          this.cameraInfo = res.result;
          this.videoFlag = true; //点击了紧急确认按钮  视频码流播放显示 静态图片隐藏
          this.urgencySureFlag = true; //by guo 2020-3-23-15:07添加  用于判断实时视频按钮的播放和切换  true--播放   false--停止
          this.alertPlayFlag = true; //报警播放标识符;
          this.isLivePlay = false;
          setTimeout(() => {
            this.initSkyRtc();
          }, 10);
        } else {
          this.$message({ message: res.message, type: "error" });
        }
      });
    },
    /* 
      查询图片
    */
    getPicture(deviceNo) {
      if (deviceNo != "") {
        let params = new Object();
        params.deviceNo = deviceNo;
        console.log(params);
        this.$postForm(
          this.ports.roomGeneralViewManagement.getPicture,
          params,
          this.acceptLanguage
        ).then(res => {
          console.log(res, "查询拍摄的图片");
          if (res.code == 200) {
            if (res.result != null) {
              if (res.result.picture != "") {
                //var backgroundImage=res.result.picture;
                // this.picture='data:image/jpg;base64,'+backgroundImage;
                var backgroundImage = res.result.pictureUrl; //by guo 2020-2-29-11:51修改  后端修改了图片返回的格式
                this.picture = backgroundImage; //by guo 2020-2-29-11:51修改  后端修改了图片返回的格式
              } else {
                this.picture = "";
              }
            } else {
              this.picture = "";
            }
          }
        });
      }
    },

    /* 
      设置房间的报警时长
    */
    handleSetAlarmTime() {
      let params = new Object();
      params.roomId = this.roomId * 1;
      params.silentTime = this.silentTime; //报警屏蔽时间
      var res = /^[0-9]{1,3}$/;
      if (this.silentTime === 0) {
        console.log(this.silentStatus, this.silentStatusRoom);
        if (this.silentStatusRoom == false) {
          this.silentStatus = false;
        }
        this.$message({
          message: this.$t("m.roomGeneralViewManagement").numNotZero,
          type: "error"
        });
      } else if (!res.test(this.silentTime)) {
        if (this.silentStatusRoom == false) {
          this.silentStatus = false;
        }
        this.$message({
          message: this.$t("m.roomGeneralViewManagement").numLength3,
          type: "error"
        });
      } else {
        this.$postJson(
          this.ports.roomGeneralViewManagement.roomSilentTime,
          params,
          this.acceptLanguage
        ).then(res => {
          console.log(res);
          if (res.code == 200) {
            this.queryRoomAlartStatus(this.roomId);
            this.$message({ message: res.message, type: "success" });
          } else {
            this.$message({ message: res.message, type: "error" });
          }
        });
      }
    },

    /* 
      设置报警屏蔽的开关
    */
    roomAlertStatus() {
      let params = new Object();
      params.roomId = this.roomId * 1;
      params.silentTime = this.silentTime; //报警屏蔽时间
      var res = /^[0-9]{1,3}$/;
      if (this.silentTime === 0) {
        console.log(this.silentStatus, this.silentStatusRoom);
        if (this.silentStatusRoom == false) {
          this.silentStatus = false;
        }
        this.$message({
          message: this.$t("m.roomGeneralViewManagement").numNotZero,
          type: "error"
        });
      } else if (!res.test(this.silentTime)) {
        if (this.silentStatusRoom == false) {
          this.silentStatus = false;
        }
        this.$message({
          message: this.$t("m.roomGeneralViewManagement").numLength3,
          type: "error"
        });
      } else {
        this.$postJson(
          this.ports.roomGeneralViewManagement.roomAlertStatusTwo,
          params,
          this.acceptLanguage
        ).then(res => {
          console.log(res);
          if (res.code == 200) {
            this.queryRoomAlartStatus(this.roomId);
            this.$message({ message: res.message, type: "success" });
          } else {
            this.$message({ message: res.message, type: "error" });
          }
        });
      }
    },

    /* 
      报警屏蔽解除
    */
    deleteRoomAlertStatus() {
      this.$deleteList(
        this.ports.roomGeneralViewManagement.roomAlertStatus + this.roomId,
        {},
        this.acceptLanguage
      ).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.queryRoomAlartStatus(this.roomId);
          this.$message({ message: res.message, type: "success" });
        } else {
          this.$message({ message: res.message, type: "error" });
        }
      });
    },

    /* 
      查询房间的报警状态
    */
    queryRoomAlartStatus(roomId) {
      this.$getForm(
        this.ports.roomGeneralViewManagement.roomAlertStatus + roomId,
        {},
        this.acceptLanguage
      ).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.silentTime = res.result.defaultSilentTime;
          this.silentStatus = res.result.silentStatus == 0 ? false : true;
          this.silentStatusRoom = res.result.silentStatus == 0 ? false : true; //用来判断房间是否设置了警报屏蔽
          if (this.silentStatusRoom == true) {
            this.readonlySilentTime = true;
            this.disabledSetAlarmTime = true;
          } else {
            this.readonlySilentTime = false;
            this.disabledSetAlarmTime = false;
          }
        }
      });
    },

    /* 
      报警开关的change事件
    */
    changeSwitch() {
      console.log(this.silentStatus);
      return this.silentStatus == true
        ? this.roomAlertStatus()
        : this.deleteRoomAlertStatus();
    },

    /* 
      点击报警列表某一行
    */
    handleAlertClick(row, event, column) {
      this.alertId = row.alertId;
      this.isHandle = row.isHandle; //获取报警处理的状态
    },

    /* 
      确认完成
    */
    handleSureComplete() {
      // this.videoFlag=false;//点击了确认完成按钮  视频码流播放隐藏  静态图片显示
      //this.initVideo();//by guo 2020-3-22-23-54修改
      if (this.alertId != "") {
        if (this.isHandle == 0) {
          this.updateAlert(this.alertId);
        } else {
          this.$message({
            message: this.$t("m.roomGeneralViewManagement").hasdealalarm,
            type: "error"
          });
        }
      } else {
        this.$message({
          message: this.roomGeneralViewManagement.selectAlarmInfo,
          type: "error"
        });
      }
    },

    /* 
      CSV输出
    */
    handleCsvOutput() {
      if (this.tableData.length != 0) {
        let params = new Object();
        params.roomId = this.roomId;
        params.groupId = this.groupId;
        if (this.timeValue != "") {
          params.startTime = this.timeValue[0] + " 00:00:00";
          params.endTime = this.timeValue[1] + " 23:59:59";
        }
        //判断是否传了开始时间和结束时间
        if (this.timeValue != "") {
          window.location.href =
            baseURL +
            this.ports.roomGeneralViewManagement
              .queryDeviceAlertLifeRoomToExcel +
            `?roomId=${params.roomId}&groupId=${params.groupId}&startTime=${params.startTime}&endTime=${params.endTime}`;
        } else {
          window.location.href =
            baseURL +
            this.ports.roomGeneralViewManagement
              .queryDeviceAlertLifeRoomToExcel +
            `?roomId=${params.roomId}&groupId=${params.groupId}`;
        }
      } else {
        this.$message({
          message: this.$t("m.roomGeneralViewManagement").noAlarmInfo,
          type: "error"
        });
      }
    },

    /* 
      返回列表
    */
    handleBackList() {
      bus.$emit("homePage", {
        type: "remove",
        path: "/RoomGeneralViewDetail",
        showpath: "/RoomGeneralViewManagement"
      });
    },

    /* 
      通过房间id获取设备编号和设备信息
    */
    queryDevice(roomId) {
      console.log(roomId);
      this.$postJson(
        this.ports.roomGeneralViewManagement.queryDevice + roomId,
        {},
        this.acceptLanguage
      ).then(res => {
        if (res.code == 200) {
          if (res.result != null || res.result.length != 0) {
            for (var i = 0; i < res.result.length; i++) {
              if (res.result[i].deviceType == 12) {
                //deviceType==12为摄像头
                this.deviceNo = res.result[i].deviceNo;
                //this.cameraStatus=res.result[i].status;//by guo 2020-2-28-15:03添加 摄像头的状态
              }else if(res.result[i].deviceType==9){//deviceType==9为床垫
                this.bedDeviceId=res.result[i].deviceId;
                this.bedDeviceNo=res.result[i].deviceNo;
                // mqtt获取实时数据需要在订阅的时候提供bedDeviceNo
                this.mqttMSG();
              }
            }
          } else {
            this.deviceNo = "";
            this.bedDeviceId = "";
          }
          console.log(this.deviceNo, this.bedDeviceId);
          this.getPicture(this.deviceNo);
          this.queryLifeRoomInfo(roomId);
        }
      });
    },

    /* 
      根据房间id查询房间的信息
    */
    queryLifeRoomInfo(roomId) {
      this.$postJson(
        this.ports.roomGeneralViewManagement.queryLifeRoomInfo + roomId,
        {},
        this.acceptLanguage
      ).then(res => {
        console.log(res, "查询房间信息");
        if (res.code == 200) {
          this.lifeRoomInfo.roomNo = res.result[0].roomNo;
          this.lifeRoomInfo.oldName =
            res.result[0].oldName == null ? "--" : res.result[0].oldName;
          this.lifeRoomInfo.temperature =
            res.result[0].temperature == null
              ? "--"
              : res.result[0].temperature;
          //this.lifeRoomInfo.inBed=(res.result[0].inBed==null && this.bedDeviceId!=undefined) ? this.$t("m.roomGeneralViewManagement").offline : ((res.result[0].inBed==null && this.bedDeviceId==undefined) ? '--' : (res.result[0].inBed==0 ? this.$t("m.roomGeneralViewManagement").inBedZero : this.$t("m.roomGeneralViewManagement").inBedOne));
          //by guo 2020-4-24-13:27 修改 添加了inBed=3为床垫离线
          if(res.result[0].inBed == null && this.bedDeviceId != undefined){
             this.lifeRoomInfo.inBed = this.$t("m.roomGeneralViewManagement").offline;
          }else if(res.result[0].inBed == null && this.bedDeviceId == undefined){
             this.lifeRoomInfo.inBed = "--";
          }else if(res.result[0].inBed == 0){
             this.lifeRoomInfo.inBed = this.$t("m.roomGeneralViewManagement").inBedZero;
          }else if(res.result[0].inBed == 1){
             this.lifeRoomInfo.inBed = this.$t("m.roomGeneralViewManagement").inBedOne;
          } else{
             this.lifeRoomInfo.inBed = this.$t("m.roomGeneralViewManagement").offline;
          }
          // this.lifeRoomInfo.inBed =
          //   (res.result[0].inBed == null && this.bedDeviceId != undefined) ? (this.$t("m.roomGeneralViewManagement").offline) : 
          //  (res.result[0].inBed == null && this.bedDeviceId == undefined) ? "--" : 
          //  (res.result[0].inBed == 0) ? (this.$t("m.roomGeneralViewManagement").inBedZero) : 
          //  (res.result[0].inBed == 0 ? this.$t("m.roomGeneralViewManagement").inBedOne) : (this.$t("m.roomGeneralViewManagement").offline);
          this.lifeRoomInfo.heartbeat =
            res.result[0].heartbeat == -1 ||
            res.result[0].heartbeat == null ||
            res.result[0].heartbeat == 0
              ? "--"
              : res.result[0].heartbeat;
          this.lifeRoomInfo.breath =
            res.result[0].breath == -1 ||
            res.result[0].breath == null ||
            res.result[0].breath == 0
              ? "--"
              : res.result[0].breath;
        }
      });
    },

    /* 
      查询报警列表按钮
    */
    serachAlarmTable() {
      console.log(this.timeValueTable);
      this.queryDeviceAlertLifeRoom(this.roomId);
    },

    /* 
      查询房间报警列表
    */
    queryDeviceAlertLifeRoom(roomId) {
      let params = new Object();
      params.roomId = roomId;
      params.pageNum = this.pageNum;
      params.pageSize = this.pageSize;
      if (
        this.timeValueTable != "" &&
        this.timeValueTable != null &&
        this.timeValueTable != undefined
      ) {
        params.startQueryTime = this.timeValueTable[0] + " 00:00:00";
        params.endQueryTime = this.timeValueTable[1] + " 23:59:59";
      }
      console.log(this.rowAlartId, this.alertVideoFlag, "++++++++++--------");
      this.$postJson(
        this.ports.roomGeneralViewManagement.queryDeviceAlertLifeRoom,
        params,
        this.acceptLanguage
      ).then(res => {
        this.tableData = [];
        if (res.code == 200) {
          if (res.result.list != null) {
            this.pageSize = res.result.pageSize;
            this.currentPage = res.result.pageNum;
            this.totalDataNumber = res.result.total * 1;
            //by guo 2020-4-3-8:27修改
            res.result.list.forEach(item => {
              if (this.rowAlartId == item.alertId) {
                if (this.alertPlayFlag == true) {
                  item.videoPlayIconShow = true;
                }
              } else {
                item.videoPlayIconShow = false;
              }
            });
            this.tableData = res.result.list;
          } else {
            this.tableData = [];
            this.pageSize = 10;
            this.currentPage = 1;
            this.totalDataNumber = 0;
          }
        } else {
          this.tableData = [];
          this.pageSize = 10;
          this.currentPage = 1;
          this.totalDataNumber = 0;
        }
      });
    },

    /* 
      处理报警列表
    */
    updateAlert(alertId) {
      this.$postJson(
        this.ports.roomGeneralViewManagement.updateAlert + alertId,
        {},
        this.acceptLanguage
      ).then(res => {
        if (res.code == 200) {
          this.queryDeviceAlertLifeRoom(this.roomId);
          //this.$message({message:res.message,type:'success'});
          this.$message({
            message: this.roomGeneralViewManagement.hasdealalarmSuccess,
            type: "success"
          }); //by guo 2020-3-18-12:11修改
          this.$bus.$emit("refreshalarmTitle"); //通知去刷新首页报警提示和房一览信息页面
        } else {
          this.queryDeviceAlertLifeRoom(this.roomId);
          // this.$message({message:res.message,type:'error'});
          this.$message({
            message: this.roomGeneralViewManagement.hasdealalarm,
            type: "error"
          }); //by guo 2020-3-18-12:11修改
        }
      });
    },
    videoSmBig() {
      var remoteVideoview = document.getElementById("remoteVideo");
      //isVideoSm
      if (remoteVideoview.requestFullscreen) {
        remoteVideoview.requestFullscreen();
      } else if (remoteVideoview.mozRequestFullScreen) {
        remoteVideoview.mozRequestFullScreen();
      } else if (remoteVideoview.webkitRequestFullScreen) {
        remoteVideoview.webkitRequestFullScreen();
      }
    },
    videoPlayPause() {
      var remoteVideoview = document.getElementById("remoteVideo");
      if (remoteVideoview.paused) {
        remoteVideoview.play();
        this.isVideoPlay = true;
      } else {
        remoteVideoview.pause();
        this.isVideoPlay = false;
      }
    },
    /* 
      生体详情
    */
    handleDetail() {
      console.log(this.bedDeviceId);
      if (
        this.bedDeviceId != "" &&
        this.bedDeviceId != null &&
        this.bedDeviceId != undefined
      ) {
        sessionStorage.setItem("bedDeviceId", this.bedDeviceId);
        sessionStorage.setItem("bedDeviceNo", this.bedDeviceNo);
        bus.$emit("homePage", {
          type: "jump",
          path: "/LifesignDetail",
          title: this.roomGeneralViewManagement.vitalSignsViewDetail
        });
      } else {
        this.$message({
          message: this.$t("m.roomGeneralViewManagement").unbindBed,
          type: "error"
        });
      }
    },
    initSkyRtc() {
      //RTCPeerConnection
      var myPeerConnection = null;
      var myDataChannel = null;
      // MediaStream from webcam
      var stream = null;
      //当前客户端的RTCPeerConnection是否创建了
      var RTCPeerConnectionCreated = false;
      var CheckedgetUserMedia = false;
      var StartCalled = false;
      var peerid = "";
      var meid = uuid();
      var sessionId = uuid();
      var connectmode = "live";
      var connectsource = "MainStream";
      var outThat = this;
      var conn = null;
      var remoteVideo = null;
      var IceCandidate = new Array();
      var IsLocalAudioTrack = false;
      var IsLocalVideoTrack = false;
      var IsLocalDataChannel = true;
      var messagecallback = null;
      var IsWebSocketConnected = false;
      var IsWebSocketCreateed = false;
      var IsVideoPlaying = false;
      var u = navigator.userAgent;
      var app = navigator.appVersion;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //ios终端
      var isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      var isChrome = u.indexOf("Chrome") !== -1; //Chrome 浏览器
      var isWeixin = u.indexOf("micromessenger") != -1; //微信浏览器

      console.log(outThat.conn);
      if (outThat.conn != null) {
        console.log("=========****==========");
        conn = outThat.conn;
        conn.close();
      }
      RHRTCLoad(this.cameraInfo);
      outThat.isVideoPlay = true;
      function RHRTCLoad(cameraInfo) {
        var toclientid = cameraInfo.toclientid;
        var host = cameraInfo.host;
        var conmode = cameraInfo.conmode;
        var consource = cameraInfo.consource;

        if (conmode === "live" || conmode === "play") {
        } else {
          conmode = "live";
          consource = "MainStream";
        }
        //微信特别的地方需要监控 WeixinJSBridgeReady  这个事件
        document.addEventListener(
          "WeixinJSBridgeReady",
          function() {
            document.getElementById("remoteVideo").play();
          },
          false
        );
        var remoteVideoview = document.getElementById("remoteVideo");
        console.log(remoteVideoview);
        RHRTCStart(
          host,
          toclientid,
          remoteVideoview,
          conmode,
          consource,
          true,
          true
        );

        // RHRTCStart(cameraInfo.toclientid,remoteVideoview,cameraInfo.conmode,cameraInfo.consource,cameraInfo.host);
      }

      //using Google public stun server
      var configuration = {
        iceServers: [
          {
            urls: [
              "stun:stun.l.google.com:19302",
              "stun:stun.l.google.com:19302?transport=udp"
            ]
          }
        ]
      };

      function NewgetUserMedia(constrains, success, error) {
        //访问用户媒体设备的兼容方法
        console.log("NewgetUserMedia----------------");
        CheckedgetUserMedia = true;
        IsLocalAudioTrack = false;
        console.log("Your browser no getUserMedia function");
      }

      //用于当视频开始播放的时候。把进度条等等做隐藏
      function changeVideocanvas() {
        console.log("stream is playing-------------");
        IsVideoPlaying = true;
        var loading = document.getElementById("loading");
        loading.style.display = "none";
      }

      /**
       * 主要接口：
       * 主要起动Webrtc函数
       *
       * @param server      链接服务器地址
       * @param serno       远程的设备号
       * @param videoview   远程音视频需要显示的<video/>标签
       * @param conmode    链接模式 有两种,string 类型  一种是实时流（"live"），一种是播放流 （"play"）
       * @param consource    在 conmode 是实时流的时候, consource 为 主码流或者是子码流 ("MainStream", "SubStream")
       *                    在 conmode 是播放流的时候, 是需要播放的文件名
       * twowayaudio
       * @param datachannel   是否使用  RTCDataChannel 发送交互数据 , bool (true or false)
       */
      function RHRTCStart(
        server,
        serno,
        videoview,
        conmode,
        consource,
        twowayaudio,
        datachannel
      ) {
        console.log(videoview);
        console.log("Your browser " + u);
        console.log("Your browser navigator appVersion " + app);
        if (videoview != null) {
          videoview.addEventListener("playing", changeVideocanvas);
          videoview.addEventListener("pause", function() {
            //暂停开始执行的函数
            console.log("暂停播放");
            outThat.isVideoPlay = false;
          });
          videoview.addEventListener("play", function() {
            //暂停开始执行的函数
            console.log("继续播放");
            outThat.isVideoPlay = true;
          });
          videoview.addEventListener("ended", function() {
            //暂停开始执行的函数
            console.log("暂停结束");
            outThat.isVideoPlay = false;
          });
        }
        if (isIos) {
          var Videos = document.querySelector("#videos");
          Videos.style.width = "100%";
          Videos.style.height = (document.body.clientWidth * 720) / 1280 + "px";
        }
        videoview.addEventListener("playing", changeVideocanvas);
        //注意：
        //需要音频对讲，需要调用 getUserMedia 获取流在创建 RTCPeerConnection 的时候。通过 addTrack 或者是 addStream 添加到 RTCPeerConnection 不然只能单向
        remoteVideo = videoview;
        if (twowayaudio == true) {
          IsLocalAudioTrack = true;
          NewgetUserMedia(
            { video: false, audio: true },
            streamHandler,
            errorHandler
          );
        } else {
          if (isWeixin == true && isIos == false) {
            IsLocalAudioTrack = true;
            NewgetUserMedia(
              { video: false, audio: true },
              streamHandler,
              errorHandler
            );
          } else if (isWeixin == true && isIos == true) {
            console.log(
              "Your browser Weixin addEventListener WeixinJSBridgeReady"
            );
            document.addEventListener(
              "WeixinJSBridgeReady",
              function() {
                remoteVideo.play();
              },
              false
            );
          } else {
            if (isChrome == true && isIos == false) {
              //IsLocalAudioTrack = true;
              // NewgetUserMedia({video: false, audio: true},streamHandler,errorHandler);
              CheckedgetUserMedia = true;
              remoteVideo.muted = true;
            } else {
              CheckedgetUserMedia = true;
            }
          }
        }

        IsLocalDataChannel = datachannel;
        var serverurl = "";
        peerid = serno;
        meid = uuid();
        sessionId = uuid();

        if (conmode === "live" || conmode === "play") {
          connectmode = conmode;
          connectsource = consource;
        } else {
          connectmode = "live";
          connectsource = "MainStream";
        }
        var ishttps = "https:" == document.location.protocol ? true : false;
        if (ishttps) {
          serverurl = "wss://" + server + "/wswebclient/" + meid;
        } else {
          // ws 改成 wss
          serverurl = "wss://" + server + "/wswebclient/" + meid;
        }
        conn = new WebSocket(serverurl);
        outThat.conn = conn;
        //when we got a message from a signaling server
        conn.onmessage = function(msg) {
          var data = JSON.parse(msg.data);
          switch (data.eventName) {
            case "_create":
              handleCreate(data.data);
              break;
            case "_offer":
              handleOffer(data.data);
              break;
            case "_answer":
              handleAnswer(data.data);
              break;
            case "_ice_candidate":
              handleCandidate(data.data);
              break;
            case "_session_disconnected":
              handleLeave();
              break;
            case "_post_message":
              handlePostMessage(data.data);
              break;
            case "_connectinfo":
              handleConnectInfo(data.data);
              break;

            default:
              console.log("Got default message", msg.data);
              break;
          }
        };

        conn.onerror = function(err) {
          IsWebSocketConnected = false;
          console.log("websocket onerror", err);
        };
        conn.onclose = function(data) {
          IsWebSocketConnected = false;
          console.log("websocket  onclose", data);
          handleLeave();
        };
        conn.onopen = function() {
          console.log("websocket open");
          IsWebSocketConnected = true;
          sendToServer({
            eventName: "__connectto",
            data: {
              sessionId: sessionId,
              sessionType: "IE",
              messageId: uuid(),
              from: meid,
              to: peerid
            }
          });
        };
      }
      function uuid() {
        var s = [];
        var hexDigits = "0123456789abcdef";
        for (var i = 0; i < 12; i++) {
          s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        s[4] = s[8] = "-";
        var uuid = s.join("");
        return uuid;
      }
      function handleConnectInfo(data) {
        console.log("Got ConnectInfo Message:", data.message);
      }
      /**
       * websocket for sending JSON encoded messages
       * 发送给服务器，然后服务器再转发给另外一个客户端
       * @param message
       */
      function sendToServer(message) {
        if (conn != null) {
          conn.send(JSON.stringify(message));
        }
      }

      /**
       * 当登录进服务器时，服务器会回复给我们，需要根据成功还是失败进行处理
       * @param success
       */
      function handleCreate(data) {
        console.log("WebSocket _create", data);
        //获取所有服务器上的
        if (data.state === "online") {
          IsWebSocketCreateed = true;
          if (
            data.iceServers !== null ||
            data.iceServers !== undefined ||
            data.iceServers !== ""
          ) {
            //console.log("WebSocket iceServers", data.iceServers);
            //服务器把ICE 服务的信息下发到js创建RTCPeerConnection使用
            //configuration = JSON.parse(data.iceServers);
            if (data.iceServers.constructor === Object) {
              console.log(
                " _create  iceServers ---object ---- ",
                JSON.stringify(data.iceServers)
              );
              configuration = JSON.parse(JSON.stringify(data.iceServers));
            } else {
              console.log(
                " _create  iceServers ---string ---- :",
                data.iceServers
              );
              configuration = JSON.parse(data.iceServers);
            }
          }
          if (CheckedgetUserMedia == true && StartCalled == false) {
            console.log("handleCreate  start call");
            Call();
          } else {
            console.log(
              "handleCreate  CheckedgetUserMedia =",
              CheckedgetUserMedia,
              " StartCalled=",
              StartCalled
            );
          }
        } else {
          console.log("WebSocket _create  offline");
          outThat.videoFlag = false;
          outThat.urgencySureFlag = false;
        }
      }

      /**
       * 发送Call 命令。通知设备端发起 offer
       * @param
       * user  pwd  这个是设备端认证用户跟密码，设备端通过 webrtc_streamer_authentication_callback 这个回调认证用户跟密码。返回是0时是认证不通过
       *       如果您不需要认证。这两项可以去掉
       */
      async function Call() {
        //console.log("call");
        StartCalled = true;
        var audioenable = "sendrecv";
        var videoenable = "sendrecv";
        var datachannelenable = "true";
        if (IsLocalDataChannel == false) {
          datachannelenable = "false";
        }
        if (IsLocalAudioTrack == false) {
          audioenable = "recvonly";
        }
        if (IsLocalVideoTrack == false) {
          videoenable = "recvonly";
        }
        console.log(
          "call audio ",
          audioenable,
          " video ",
          videoenable,
          " datachannel",
          datachannelenable
        );
        sendToServer({
          eventName: "__call",
          data: {
            sessionId: sessionId,
            sessionType: "IE",
            messageId: uuid(),
            from: meid,
            to: peerid,
            mode: connectmode,
            source: connectsource,
            datachannel: datachannelenable,
            audio: audioenable,
            video: videoenable,
            user: "admin",
            pwd: "123456",
            iceservers: JSON.stringify(configuration)
          }
        });
      }
      /**
       * when 设备端发过来 offer
       * @param offer 表示offer
       * @returns {Promise<void>}
       *  设备端发送  offer 后。先创建 RTCPeerConnection 然后设置 setRemoteDescription 后返回 answner 发送给设备端
       */
      async function handleOffer(data) {
        //如果没创建RTCPeerConnection,需要重新创建连接对象，否则不需要
        console.log("Offer --- ---- sdp  :\n", data.sdp);
        if (RTCPeerConnectionCreated == false) {
          initPeerConnection();
        }
        if (RTCPeerConnectionCreated == false) {
          console.log(
            "handleOffer Failed   RTCPeerConnectionCreated = ",
            RTCPeerConnectionCreated
          );
          sendDisconnect();
          return;
        }

        let nativeRTCSessionDescription =
          window.mozRTCSessionDescription || window.RTCSessionDescription;

        myPeerConnection.setRemoteDescription(
          new nativeRTCSessionDescription({ type: "offer", sdp: data.sdp })
        );
        //create an answer to an offer

        myPeerConnection
          .createAnswer()
          .then(function(answer) {
            myPeerConnection.setLocalDescription(answer);
            console.log("Answer sdp :\n" + answer.sdp);
            sendToServer({
              eventName: "__answer",
              data: {
                sessionId: sessionId,
                sessionType: "IE",
                messageId: uuid(),
                from: meid,
                to: peerid,
                type: answer.type,
                sdp: answer.sdp
              }
            });
          })
          .catch(function(error) {
            console.log(
              "Error when create  Answer-----------------------------"
            );
            sendDisconnect();
          });
      }
      /**
       * when we got an answer from a remote user
       * @param answer 对方发过来的answer
       * @returns {Promise<void>}
       */
      async function handleAnswer(answer) {
        let nativeRTCSessionDescription =
          window.mozRTCSessionDescription || window.RTCSessionDescription;
        await myPeerConnection.setRemoteDescription(
          new nativeRTCSessionDescription({
            type: answer.type,
            sdp: answer.sdp
          })
        );
      }
      /**
       * when we got an ice candidate from a remote user
       * @param candidate 对方法发过来的candidate
       */
      function handleCandidate(data) {
        console.log(data);
        var obj = JSON.parse(data);
        console.log("candidate --- ----   :", obj.candidate);
        if (myPeerConnection != null && RTCPeerConnectionCreated == true) {
          let nativeRTCIceCandidate =
            window.mozRTCIceCandidate || window.RTCIceCandidate;
          var candidate = new nativeRTCIceCandidate({
            sdpMLineIndex: obj.sdpMLineIndex,
            candidate: obj.candidate
          });
          myPeerConnection.addIceCandidate(candidate);
        } else {
          IceCandidate.push(obj);
        }
      }
      /**
       *  发送断开命令给客户端
       */
      function sendDisconnect() {
        sendToServer({
          eventName: "__disconnected",
          data: {
            sessionId: sessionId,
            sessionType: "IE",
            messageId: uuid(),
            from: meid,
            to: peerid
          }
        });
      }
      /**
       * 断开连接的处理逻辑
       */
      function handleLeave() {
        // outThat.videoFlag = false;
        // Disconnect all our event listeners; we don't want stray events
        // to interfere with the hangup while it's ongoing.
        if (myDataChannel != null) {
          myDataChannel.onopen = null;
          myDataChannel.onclose = null;
          myDataChannel.onmessage = null;
          myDataChannel.onerror = null;
          myDataChannel.close();
          myDataChannel = null;
        }
        if (myPeerConnection != null) {
          myPeerConnection.onicecandidate = null;
          myPeerConnection.onaddstream = null;
          myPeerConnection.ontrack = null;
          myPeerConnection.onsignalingstatechange = null;
          myPeerConnection.onicegatheringstatechange = null;
          //myPeerConnection.onnotificationneeded = null;
          myPeerConnection.close();
          myPeerConnection = null;
        }
        RTCPeerConnectionCreated = false;
      }
      function getObjectURL(stream) {
        var url = null;
        try {
          if (window.createObjectURL != undefined) {
            // basic
            url = window.createObjectURL(stream);
          } else if (window.URL != undefined) {
            // mozilla(firefox)
            url = window.URL.createObjectURL(stream);
          } else if (window.webkitURL != undefined) {
            // webkit or chrome
            url = window.webkitURL.createObjectURL(stream);
          }
        } catch (error) {
          url = null;
        }
        return url;
      }
      //**********************
      //Init a peer connection
      //**********************
      function initPeerConnection() {
        //因为各浏览器差异，RTCPeerConnection 一样需要加上前缀。

        let PeerConnection =
          window.RTCPeerConnection ||
          window.PeerConnection ||
          window.webkitPeerConnection00 ||
          window.webkitRTCPeerConnection ||
          window.mozRTCPeerConnection;

        try {
          console.log(
            "initPeerConnection create PeerConnection configuration =",
            configuration
          );
          myPeerConnection = new PeerConnection(configuration);
          if (myPeerConnection != null) {
            if ("addTrack" in myPeerConnection) {
              //console.log('PeerConnection use addTrack');
              if (stream != null) {
                stream.getTracks().forEach(track => {
                  myPeerConnection.addTrack(track, stream);
                  console.log("PeerConnection use addTrack type", track.kind);
                });
              } else {
                console.log("PeerConnection  addTrack  stream is null");
              }
            } else {
              // console.log('PeerConnection use addStream');
              if (stream != null) {
                myPeerConnection.addStream(stream);
              } else {
                console.log("PeerConnection  addStream is null");
              }
            }

            //**********************
            //Register event process needed
            //**********************
            // setup stream listening
            if ("ontrack" in myPeerConnection) {
              //when a remote user adds stream to the peer connection, we display it
              myPeerConnection.ontrack = handleRemoteTrackAdded;
            } else {
              //when a remote user adds stream to the peer connection, we display it
              myPeerConnection.onaddstream = handleRemoteStreamAdded;
            }
            // Setup other events
            myPeerConnection.onicecandidate = handleIceCandidate;
            myPeerConnection.oniceconnectionstatechange = handleIceConnectionStateChangeEvent;
            myPeerConnection.onicegatheringstatechange = handleIceGatheringStateChangeEvent;
            myPeerConnection.onsignalingstatechange = handleSignalingStateChangeEvent;
            //myPeerConnection.onnegotiationneeded = handleNegotiationNeededEvent;
            if (IsLocalDataChannel == true) {
              try {
                myDataChannel = myPeerConnection.createDataChannel(
                  "mydatachannel"
                );
                if (myDataChannel) {
                  myDataChannel.onopen = handleDataChannelOnOpen;
                  myDataChannel.onclose = handleDataChannelOnClose;
                  myDataChannel.onmessage = handleDataChannelOnMessage;
                  myDataChannel.onerror = handleDataChannelOnError;
                }
              } catch (error) {
                console.log("data_channel_create_error  ");
              }
            }

            console.log("Sucessed to create PeerConnection");
            RTCPeerConnectionCreated = true;
          } else {
            console.log("Failed to create PeerConnection");
            RTCPeerConnectionCreated = false;
          }
        } catch (e) {
          console.log(
            "Failed to create PeerConnection, exception: " + e.message
          );
          RTCPeerConnectionCreated = false;
          return;
        }
      }
      //RTCDataChannel  处理函数
      // 主要有  onopen ，onclose，onmessage，onerror
      ////////////////////////////////////////////////////////////////////////
      function handleDataChannelOnOpen() {
        console.log("handleDataChannelOnOpen");
      }
      function handleDataChannelOnClose(event) {
        console.log("handleDataChannelOnClose ", event);
      }
      function handleDataChannelOnMessage(message) {
        console.log("handleDataChannelOnMessage ", message);
        var json;
        json = JSON.parse(message.data);
        if (json.type === "__file") {
        } else if (json.type === "__msg") {
          console.log(
            "handleDataChannelOnClose recive message data",
            json.data
          );
        } else {
          console.log(
            "handleDataChannelOnClose recive message data",
            json.data
          );
        }
      }
      function handleDataChannelOnError(err) {
        console.log("handleDataChannelOnError ", err);
      }
      /////////////////////////////////////////////////////////////////////////////
      // Handles |icecandidate| events by forwarding the specified
      // ICE candidate (created by our local ICE agent) to the other
      // peer through the signaling server.
      async function handleIceCandidate(event) {
        //  ==>15 handleIceCandidate sendIce
        if (event.candidate) {
          console.log("onicecandidate: " + event.candidate.candidate);
          sendToServer({
            eventName: "__ice_candidate",
            data: {
              sessionId: sessionId,
              sessionType: "IE",
              messageId: uuid(),
              to: peerid,
              from: meid,
              label: event.candidate.sdpMLineIndex,
              candidate: event.candidate.candidate
            }
          });
        }
      }
      // Called by the WebRTC layer when events occur on the media tracks
      // on our WebRTC call. This includes when streams are added to and
      // removed from the call.
      //
      // track events include the following fields:
      //
      // RTCRtpReceiver       receiver
      // MediaStreamTrack     track
      // MediaStream[]        streams
      // RTCRtpTransceiver    transceiver
      //
      // In our case, we're just taking the first stream found and attaching
      // it to the <video> element for incoming media.
      async function handleRemoteTrackAdded(e) {
        // ==>9. handleRemoteTrackAdded
        if (remoteVideo != null) {
          if ("srcObject" in remoteVideo) {
            console.log(
              "handleRemoteTrackAdded attachStream srcObject stream id = ",
              e.streams[0].id
            );

            e.streams[0].getTracks().forEach(track => {
              console.log("handleRemoteTrackAdded  type", track.kind);
            });
            remoteVideo.srcObject = e.streams[0];
            if (isChrome == false) {
              remoteVideo.play();
            }
          } else {
            // 防止在新的浏览器里使用它，应为它已经不再支持了
            var objUrl = getObjectURL(e.streams[0]);
            console.log(
              "handleRemoteTrackAdded attachStream getObjectURL stream id = ",
              e.streams[0].id
            );
            remoteVideo.src = objUrl;
            if (isChrome == false) {
              remoteVideo.play();
            }
          }
        }
      }
      //since addstream is desperated
      async function handleRemoteStreamAdded(e) {
        if (remoteVideo != null) {
          if ("srcObject" in remoteVideo) {
            console.log(
              "handleRemoteStreamAdded attachStream srcObject stream id = ",
              e.stream.id
            );
            remoteVideo.srcObject = e.stream;
            if (isChrome == false) {
              remoteVideo.play();
            }
          } else {
            // 防止在新的浏览器里使用它，应为它已经不再支持了
            var objUrl = getObjectURL(e.stream);
            console.log(
              "handleRemoteStreamAdded attachStream getObjectURL stream id = ",
              e.stream.id
            );
            remoteVideo.src = objUrl;
            if (isChrome == false) {
              remoteVideo.play();
            }
          }
        }
      }
      /**
       * getUserMedia的then
       * @param myStream
       */
      function streamHandler(myStream) {
        console.log("::streamHandler", myStream);
        stream = myStream;
        //displaying local video stream on the page
        window.localStream = stream;
        if ("getTracks" in stream) {
          console.log("streamHandler getTracks");
          if (stream != null) {
            stream.getTracks().forEach(track => {
              console.log("streamHandler getTracks type", track.kind);
              if (track.kind === "audio") {
                IsLocalAudioTrack = true;
              } else if (track.kind === "video") {
                IsLocalVideoTrack = true;
              }
            });
          }
        }
        if (StartCalled == false && IsWebSocketCreateed == true) {
          console.log("streamHandler  start call");
          Call();
        }
      }
      /**
       * getUserMedia的catch
       * @param error
       */
      function errorHandler(error) {
        console.log("errorHandler", error);
        CheckedgetUserMedia = true;
        if (StartCalled == false && IsWebSocketCreateed == true) {
          IsLocalAudioTrack = false;
          console.log("errorHandler  start call");
          Call();
        }
      }
      // Handle |iceconnectionstatechange| events. This will detect
      // when the ICE connection is closed, failed, or disconnected.
      //
      // This is called when the state of the ICE agent changes.
      async function handleIceConnectionStateChangeEvent(event) {
        if (myPeerConnection == null) {
          return;
        }
        console.log(
          "*** ICE connection state changed to " +
            myPeerConnection.iceConnectionState
        );
        // ==>20 checking = >>> connected
        switch (myPeerConnection.iceConnectionState) {
          case "closed":
          case "failed":
          case "disconnected":
            handleLeave();
            break;
          case "connected":
            break;
        }
      }
      // Handle the |icegatheringstatechange| event. This lets us know what the
      // ICE engine is currently working on: "new" means no networking has happened
      // yet, "gathering" means the ICE engine is currently gathering candidates,
      // and "complete" means gathering is complete. Note that the engine can
      // alternate between "gathering" and "complete" repeatedly as needs and
      // circumstances change.
      //
      // We don't need to do anything when this happens, but we log it to the
      // console so you can see what's going on when playing with the sample.
      async function handleIceGatheringStateChangeEvent(event) {
        if (myPeerConnection == null) {
          return;
        }
        // ==>14 myPeerConnection.iceGatheringState: gathering
        // ==>16 myPeerConnection.iceGatheringState: complete
        console.log(
          "*** ICE gathering state changed to: " +
            myPeerConnection.iceGatheringState
        );
      }
      // Set up a |signalingstatechange| event handler. This will detect when
      // the signaling connection is closed.
      //
      // NOTE: This will actually move to the new RTCPeerConnectionState enum
      // returned in the property RTCPeerConnection.connectionState when
      // browsers catch up with the latest version of the specification!
      async function handleSignalingStateChangeEvent(event) {
        // ==>7.  myPeerConnection.signalingState :: have-remote-offer
        // ==>13  myPeerConnection.signalingState :: stable
        if (myPeerConnection == null) {
          return;
        }
        //  myPeerConnection.signalingState :: have-remote-offer
        console.log(
          "*** WebRTC signaling state changed to: " +
            myPeerConnection.signalingState
        );
        switch (myPeerConnection.signalingState) {
          case "closed":
            handleLeave();
            break;
        }
      }
      //通过信令通道 PostMessage
      function PostMessage(message, callback) {
        if (IsWebSocketConnected == true) {
          var messageid = uuid();
          messagecallback = callback;
          sendToServer({
            eventName: "__post_message",
            data: {
              sessionType: "IE",
              messageId: messageid,
              to: peerid,
              from: meid,
              message: message
            }
          });
        } else {
        }
      }
      //通过信令通道 收到  PostMessage 的返回结果
      function handlePostMessage(data) {
        var messageid = data.messageId;
        if (messagecallback === undefined || messagecallback === null) {
        } else {
          typeof messagecallback === "function" &&
            messagecallback(data.message);
          messagecallback = null;
        }
      }
      //通过 datachannel 发送信息到设备端
      function DataChannelSendMessage(message) {
        if (myDataChannel != null) {
          if (myDataChannel.readyState.toLowerCase() === "open") {
            myDataChannel.send(
              JSON.stringify({
                type: "__msg",
                data: message
              })
            );
          } else {
            console.log(
              "Failed sendMessage   ------------------------- -----",
              myDataChannel.readyState.toLowerCase()
            );
          }
        }
      }
    },

    /* 
      紧急确认
    */
    handleUrgencySure() {
      if (this.videoFlag && this.isLivePlay) {
        var remoteVideoview = document.getElementById("remoteVideo");
        if (remoteVideoview.paused) {
          remoteVideoview.play();
          this.isVideoPlay = true;
        } else {
          remoteVideoview.pause();
          this.isVideoPlay = false;
        }
      } else {
        // this.rowAlartId="";//by guo 清空点击的报警id
        this.rowAlartId = ""; //by guo 清空点击的报警id
        this.alertVideoFlag = false; //报警录像是否存在  false不存在
        if (this.alertPlayFlag && this.urgencySureFlag) {
          this.alertPlayFlag = false;
          this.urgencySureFlag = false;
        }
        if (this.urgencySureFlag == false) {
          // if(this.cameraStatus=="online"){
          this.$postForm(
            "dmc/camera/showByWebRTC",
            { deviceNo: this.deviceNo },
            this.acceptLanguage
          ).then(res => {
            if (res.code == 200) {
              this.cameraInfo = res.result;
              this.videoFlag = true; //点击了紧急确认按钮  视频码流播放显示 静态图片隐藏
              this.alertPlayFlag = false;
              this.isLivePlay = true; //实时视频播放
              this.urgencySureFlag = true; //by guo 2020-3-23-15:07添加  用于判断实时视频按钮的播放和切换  true--播放   false--停止
              setTimeout(() => {
                this.initSkyRtc();
              }, 10);
            } else {
              this.$message({ message: res.message, type: "error" });
            }
          });
          // }else{
          //   this.$message({message:this.$t("m.roomGeneralViewManagement").cameraOffline,type:"error"});
          // }
        } else {
          this.videoFlag = false; //点击了确认完成按钮  视频码流播放隐藏  静态图片显示
          this.urgencySureFlag = false; //by guo 2020-3-23-15:07添加  用于判断实时视频按钮的播放和切换  true--播放   false--停止
        }
      }
    },

    /* 
      处理报警列表的报警类型
    */
    formatAlertType(row, column, cellValue) {
      switch (row.alertType) {
        case 0:
          return this.$t("m.roomGeneralViewManagement").alertTypeZero;
          break;
        case 1:
          return this.$t("m.roomGeneralViewManagement").alertTypeOne;
          break;
        case 2:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwo;
          break;
        case 3:
          return this.$t("m.roomGeneralViewManagement").alertTypeThree;
          break;
        case 4:
          return this.$t("m.roomGeneralViewManagement").alertTypeFour;
          break;
        case 5:
          return this.$t("m.roomGeneralViewManagement").alertTypeFive;
          break;
        case 6:
          return this.$t("m.roomGeneralViewManagement").alertTypeSix;
          break;
        case 7:
          return this.$t("m.roomGeneralViewManagement").alertTypeSeven;
          break;
        case 8:
          return this.$t("m.roomGeneralViewManagement").alertTypeEigth;
          break;
        case 9:
          return this.$t("m.roomGeneralViewManagement").alertTypeNine;
          break;
        case 10:
          return this.$t("m.roomGeneralViewManagement").alertTypeTen;
          break;
        case 11:
          return this.$t("m.roomGeneralViewManagement").alertTypeEleven;
          break;
        case 12:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwelve;
          break;
        case 13:
          return this.$t("m.roomGeneralViewManagement").alertTypeThirteen;
          break;
        case 14:
          return this.$t("m.roomGeneralViewManagement").alertTypeFourteen;
          break;
        case 15:
          return this.$t("m.roomGeneralViewManagement").alertTypeFifteen;
          break;
        case 16:
          return this.$t("m.roomGeneralViewManagement").alertTypeSixteen;
          break;
        case 17:
          return this.$t("m.roomGeneralViewManagement").alertTypeSeventeen;
          break;
        //by guo 2020-3-9-11:56注释  需求变更  呼吸和心跳又合并为1个
        // case 18:
        //   return this.$t("m.roomGeneralViewManagement").alertTypeEighteen;
        //   break;
        case 20:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwenty;
          break;
        case 21:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwentyone;
          break;
        case 22:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwentytwo;
          break;
        case 23:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwentythree;
          break;
        case 24:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwentyfour;
          break;
      }
    },
    /* 
      初始页currentPage、初始每页数据数pagesize和数据data
    */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      //改变每页显示的条数
      this.PageSize = val;
      this.queryDeviceAlertLifeRoom(this.roomId);
    },

    /* 
      当前页变化
    */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.queryDeviceAlertLifeRoom(this.roomId);
    },

    /* 
      修改table tr行的背景色
    */
    tableRowStyle({ row, rowIndex }) {
      //isHandle==0未处理的
      if (row.isHandle == 0 && row.alertId == this.alertId) {
        //#EBEEF5
        return "background-color: #F5F7FA;color:#3e4b53";
        // this.alertId=row.alertId;
      } else if (row.isHandle == 0) {
        //return "background-color: #efefef";
        return "background-color: #ffffff;color:#3e4b53";
      } else {
        //return "background-color: #f9f9f9";
        return "background-color: #bee1f4;color:#3e4b53";
      }
    },
    //设置模糊度
    initAlpha() {
      var alphaValue = 0;
      var storeAlpha = sessionStorage.getItem("videoAlpha");
      this.$postJson("omc/lifeAmbiguity/select", {}, this.acceptLanguage).then(
        res => {
          if (res.code == 200 && res.result.length != 0) {
            var storeAlpha = res.result[0].ambiguity;
            if (Number(storeAlpha) == null) {
              storeAlpha = 0;
            } else {
              storeAlpha = Number(storeAlpha);
            }
          }
        }
      );
      console.log(storeAlpha);
      if (Number(storeAlpha) == null) {
        alphaValue = 0;
      } else {
        alphaValue = Number(storeAlpha);
      }
      this.filterBlur = "filter-blur" + alphaValue;
    },
    /* 
      修改table header的背景色
    */
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color:#ffffff;color:#000000;font-weight: 700;";
      }
    }
  },
  computed: {
    player() {
      console.log(this.videoFlag, "------");
      if (this.videoFlag == true) {
        return this.$refs.videoPlayer.player;
      } else {
        return this.$refs.videoPlayer.pause;
      }
    }
  },
  created() {
    this.groupId = sessionStorage.getItem("groupId");
    this.roomId = sessionStorage.getItem("lifeRoomDetail_roomId");
    this.queryDevice(this.roomId);
    this.queryDeviceAlertLifeRoom(this.roomId);
    this.queryRoomAlartStatus(this.roomId);
  },
  mounted() {
    this.initAlpha();
    this.$bus.$on("changeLifeAlarm_websocket", () => {
      console.log(
        "接收到新的报警信息，刷新房间详情报警列表的数据--------房间一览详情"
      );
      this.queryDeviceAlertLifeRoom(this.roomId);
      this.queryLifeRoomInfo(this.roomId);
    });
    if (sessionStorage.getItem("language") == "ja_JP") {
      this.languageClass = true;
    } else {
      this.languageClass = false;
    }
  },
  destroyed() {
    if (this.conn != null) {
      this.conn.close();
    }
    this.client.end(); //断开mqtt的连接  组件销毁后需要断开mqtt的连接 否则后端就会一直推送消息影响性能
  },
  components: {
    KtButton,
    videoPlayer
  }
};
</script>
<style lang="scss" scoped>
.roomGeneralViewDetail {
  overflow-x: hidden;
  padding-bottom: 30px;
  .height40 {
    height: 44px;
    line-height: 44px;
    .height40-span {
      display: inline-block;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      font-weight: 700;
      img {
        vertical-align: middle;
        margin-right: 15px;
      }
    }
  }
  .height50 {
    height: 35px;
    line-height: 30px;
    .height50-itemName {
      color: #999999;
    }
  }
  .startTimeSecond {
    width: 100px;
  }
  .moHu {
    position: relative;
  }
  #videoSmBig {
    position: absolute;
    z-index: 10;
    bottom: 24px;
    margin-left: 100%;
    right: 7px;
    color: white;
    height: 50px;
    font-size: 30px;
  }
  #videoPlayPause {
    position: absolute;
    z-index: 10;
    bottom: 25px;
    left: 5px;
    color: white;
    height: 50px;
    caret-color: rgba(0, 0, 0, 0);
    font-size: 32px;
  }
  #pixi {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
  .roomGeneralViewDetail-c {
    // width: 50%;
    width: 68%; //by guo 2020-3-9-13:58修改
    max-height: 350px;
    margin: 10px 0;
    // overflow-y: auto;
  }
  .roomGeneralViewDetail-d {
    width: 50%;
    margin-top: 20px;
  }
  .roomGeneralViewDetail-e {
    width: 50%;
    margin: 0;
  }
  .roomGeneralViewDetail-f {
    margin: 30px 0 5px;
  }
  .btn0 {
    background: #dddddd;
    color: #000000;
  }
  .btn1 {
    background: #409efe;
    color: #ffffff;
  }
  .btn2 {
    background: #fe0000;
    color: #ffffff;
  }
}
/* 定义keyframe动画，命名为blink */
@keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* 添加兼容性前缀 */
@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* 定义blink类*/
.blink {
  color: #dd4814;
  animation: blink 1s linear infinite;
  /* 其它浏览器兼容性前缀 */
  -webkit-animation: blink 1s linear infinite;
  -moz-animation: blink 1s linear infinite;
  -ms-animation: blink 1s linear infinite;
  -o-animation: blink 1s linear infinite;
}
/deep/ .vjs_video_817-dimensions {
  width: 600px !important;
  height: 420px !important;
}
/deep/ .roomGeneralViewDetail-c .el-pagination__total {
  margin-right: 0px !important;
}
/deep/ .roomGeneralViewDetail-c .el-pagination__jump {
  margin-left: 0px !important;
}
.remotevideo {
  margin: 0 auto;
  width: 100%;
  min-height: 420px;
  height: 420px;
  object-fit: fill;
  position: relative;
}
.filter-blur7 {
  filter: blur(7px) grayscale(100%) opacity(50%);
}
.filter-blur6 {
  filter: blur(6px) grayscale(100%);
}
.filter-blur5 {
  filter: blur(5px) grayscale(100%);
}
.filter-blur4 {
  filter: blur(4px) grayscale(100%);
}
.filter-blur3 {
  filter: blur(3px) grayscale(100%) contrast(150%);
}
.filter-blur2 {
  filter: blur(2px) grayscale(100%) contrast(150%);
}
.filter-blur1 {
  filter: blur(1px) grayscale(100%);
}
.filter-blur0 {
  filter: blur(0px);
}
.Ckplayer {
  margin: 0 auto;
  width: 100%;
  height: 420px;
  position: relative;
}
#video {
  width: 100%;
  height: 420px;
}
.arc {
  --width: 100%;
  --height: 100%;
  position: absolute;
  margin: auto;
  left: calc(var(--width) / 2 - 25px);
  top: calc(var(--height) / 2 - 25px);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-top: 2px solid #ffea29;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  animation: rt 2s infinite linear;
}
.arc::before {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border-top: 2px solid #8d29ff;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  animation: rt 4s infinite linear reverse;
  content: "";
}
.arc::after {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  border-top: initial;
  border-left: initial;
  border-right: initial;
  animation: cw 1s infinite;
  content: "";
  background: snow;
}
@media (min-width: 1024px) {
  .roomGeneralViewDetail-a {
    margin-bottom: 10px;
    .alarmMessage {
      background: #f9d004;
      width: 90%;
      font-size: 14px;
      font-weight: 700;
      margin-top: 10px;
    }
    .alarmMessageJp {
      background: #f9d004;
      width: 90%;
      font-size: 14px;
      font-weight: 700;
      margin-top: 10px;
    }
  }
  .roomGeneralViewDetail-a-res {
    width: 100%;
    height: 420px;
  }
}
@media (min-width: 1100px) {
  .roomGeneralViewDetail-a {
    margin-bottom: 10px;
    .alarmMessage {
      background: #f9d004;
      width: 90%;
      font-size: 14px;
      font-weight: 700;
      margin-top: 10px;
    }
    .alarmMessageJp {
      background: #f9d004;
      width: 100%;
      font-size: 14px;
      font-weight: 700;
      margin-top: 10px;
    }
  }
  .roomGeneralViewDetail-a-res {
    width: 100%;
    height: 420px;
  }
}
@media (min-width: 1366px) {
  .roomGeneralViewDetail-a {
    margin-bottom: 10px;
    .alarmMessage {
      background: #f9d004;
      width: 75%;
      font-size: 16px;
      font-weight: 700;
      margin-top: 10px;
    }
    .alarmMessageJp {
      background: #f9d004;
      width: 100%;
      font-size: 16px;
      font-weight: 700;
      margin-top: 10px;
    }
  }
  .roomGeneralViewDetail-a-res {
    width: 100%;
    height: 420px;
  }
}
@media (min-width: 1440px) {
  .roomGeneralViewDetail-a {
    margin-bottom: 10px;
    .alarmMessage {
      background: #f9d004;
      width: 70%;
      font-size: 18px;
      font-weight: 700;
      margin-top: 10px;
    }
    .alarmMessageJp {
      background: #f9d004;
      width: 100%;
      font-size: 18px;
      font-weight: 700;
      margin-top: 10px;
    }
  }
  .roomGeneralViewDetail-a-res {
    width: 100%;
    height: 420px;
  }
}
@media (min-width: 1600px) {
  .roomGeneralViewDetail-a {
    margin-bottom: 10px;
    .alarmMessage {
      background: #f9d004;
      width: 65%;
      font-size: 18px;
      font-weight: 700;
      margin-top: 10px;
    }
    .alarmMessageJp {
      background: #f9d004;
      width: 92%;
      font-size: 18px;
      font-weight: 700;
      margin-top: 10px;
    }
  }
  .roomGeneralViewDetail-a-res {
    width: 100%;
    height: 420px;
  }
}
@media (min-width: 1680px) {
  .roomGeneralViewDetail-a {
    margin-bottom: 10px;
    .alarmMessage {
      background: #f9d004;
      width: 65%;
      font-size: 18px;
      font-weight: 700;
      margin-top: 10px;
    }
    .alarmMessageJp {
      background: #f9d004;
      width: 92%;
      font-size: 18px;
      font-weight: 700;
      margin-top: 10px;
    }
  }
  .roomGeneralViewDetail-a-res {
    width: 100%;
    height: 420px;
  }
}
@media (min-width: 1920px) {
  .roomGeneralViewDetail-a {
    margin-bottom: 10px;
    .alarmMessage {
      background: #f9d004;
      width: 50%;
      font-size: 18px;
      font-weight: 700;
      margin-top: 10px;
    }
    .alarmMessageJp {
      background: #f9d004;
      width: 73%;
      font-size: 18px;
      font-weight: 700;
      margin-top: 10px;
    }
  }
  .roomGeneralViewDetail-a-res {
    width: 100%;
    height: 420px;
  }
}
@media (min-width: 2100px) {
  .roomGeneralViewDetail-a {
    margin-bottom: 10px;
    .alarmMessage {
      background: #f9d004;
      width: 47%;
      font-size: 18px;
      font-weight: 700;
      margin-top: 10px;
    }
    .alarmMessageJp {
      background: #f9d004;
      width: 65%;
      font-size: 18px;
      font-weight: 700;
      margin-top: 10px;
    }
  }
  .roomGeneralViewDetail-a-res {
    width: 100%;
    height: 420px;
  }
}
</style>